<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    主页
    <!-- <hr>
    <my-com @click.native="hClick" />
    <hr>
    <div @click="hClick">我是一个div</div> -->

    <!-- 相当于 -->
    <!-- <com1 :value="a" @input="val=> this.a = val" /> -->
    <!-- <com1 v-model="a" :b="num" @changeNum="hChangeNum" /> -->
    <com1
      v-model="a"
      :b.sync="num"
      :c.sync="num2"
    />
    <!-- <com1 v-model="a" :b="num" @update:b="val => this.num=val"/> -->
  </div>
</template>

<script>
import MyCom from './MyCom'
import Com1 from './com-v-model.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    MyCom,
    Com1
  },
  data() {
    return {
      num: 200,
      num2: 201,
      a: 100
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    hChangeNum(val) {
      console.log('收到hChangeNum事件')
      this.num = val
    },
    hClick() {
      console.log('子组件被点击了')
    }
  }
}
</script>

  <style lang="scss" scoped>
    .dashboard {
    &-container {
    margin: 30px;
    }
    &-text {
    font-size: 30px;
    line-height: 46px;
    }
    }
  </style>
</template>
